<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <!-- <div class="banner-box">
      <img src="http://autumnfish.cn/static/fruit.jpg" alt="" />
    </div> -->
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody" v-for="(item, index) in fruitList" :key="item.id">
          <div :class="{ tr: 'tr', active: item.isChecked === true }">
            <div class="td">
              <input type="checkbox" v-model="item.isChecked" />
            </div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button
                  class="decrease"
                  @click="subl(item.id)"
                  :disabled="item.num <= 1"
                >
                  -
                </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="add(item.id)">+</button>
              </div>
            </div>
            <div class="td">{{ item.num * item.price }}</div>
            <div class="td">
              <button @click="delfruitList(item.id)">删除</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="checkAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{
              sumAll
            }}</span></span
          >
          <!-- 结算按钮 -->
          <button class="pay">结算({{ sums }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";

let fruitList = ref([
  {
    id: 1,
    icon: "../public/火龙果.png",
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: "../public/荔枝.png",
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: "../public/榴莲.png",
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: "../public/鸭梨.png",
    isChecked: true,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: "../public/樱桃.png",
    isChecked: false,
    num: 20,
    price: 34,
  },
]);

// fruitList.value = JSON.parse(localStorage.getItem("key") as string) || [];
fruitList.value =
  JSON.parse(localStorage.getItem("key") as string) || fruitList.value;

const delfruitList = (id: number) => {
  fruitList.value = fruitList.value.filter((item) => item.id !== id);
};

// interface Fruit{
//     id: number;
//     icon: string;
//     isChecked: boolean;
//     num: number;
//     price: number;
// }
let nums = ref();
const add = (id: number) => {
  nums.value = fruitList.value.find((item) => item.id === id);
  nums.value.num++;
};

const subl = (id: number) => {
  nums.value = fruitList.value.find((item) => item.id === id);
  nums.value.num--;
};

const checkAll = computed({
  // return fruitList.value.every((item) => item.isChecked);
  get() {
    return fruitList.value.every((item) => item.isChecked);
  },
  set(val) {
    fruitList.value.forEach((item) => (item.isChecked = val));
  },
});

const sums = computed(() => {
  return fruitList.value.reduce(
    (arr, item) => (item.isChecked === true ? arr + item.num : arr),
    0
  );
});

const sumAll = computed(() => {
  return fruitList.value.reduce(
    (arr, item) =>
      item.isChecked === true ? arr + item.num * item.price : arr,
    0
  );
});

onMounted(() => {
  watch(
    () => fruitList.value,
    (newVal) => {
      localStorage.setItem("key", JSON.stringify(newVal));
    },
    { deep: true, immediate: true }
  );
});
</script>

<style scoped>
@import "./styles/css/index.css";
</style>
